<template>
  <NuxtLayout name="admin" menuActive="/admin/curriculum">
    <div class="card">
      <el-page-header :content="infoData.title" @back="useRouter().go(-1)">
        <template #extra>
          <el-button @click="goAddFn" v-show="goAddStatus">章节管理</el-button>
        </template>
      </el-page-header>
      <div style="height: 18px;"></div>
      <el-table class="my_table" :data="tableData" empty-text="请先添加章节数据" row-key="id" :expand-row-keys="expandedRowKeys" show-overflow-tooltip>
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.videos" border show-overflow-tooltip>
              <el-table-column prop="title" label="视频标题" width="350" />
              <el-table-column label="封面图" width="130">
                <template #default="scope">
                  <el-image style="width: 100px;height: 100px;" :src="scope.row.imgs[0]"
                    :preview-src-list="[scope.row.imgs[0]]" preview-teleported fit="cover"
                    v-if="scope.row.imgs && scope.row.imgs.length > 0" />
                </template>
              </el-table-column>
              <el-table-column prop="brief" label="视频简介" />
              <el-table-column label="视频地址">
                <template #default="scope">
                  <el-link :href="scope.row.video" target="_blank" v-show="scope.row.video">查看</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="duration" label="时长(秒)" />
              <el-table-column prop="hours" label="学时" />
              <el-table-column prop="sort" label="排序" />
              <el-table-column prop="enabled" label="是否启用">
                <template #default="scope">
                  <el-tag type="success" v-show="scope.row.enabled == 1">启用</el-tag>
                  <el-tag type="info" v-show="scope.row.enabled == 0">停用</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="180">
                <template #default="scope">
                  <el-button type="success" size="small" @click="editFn(scope.row, props.row)">编辑</el-button>
                  <el-button type="danger" size="small" @click="delFn(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="章节名称" />
        <el-table-column prop="totalVideo" label="视频数量" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="props">
            <el-button type="primary" size="small" @click="addFn(props.row)">添加视频</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <MyForm :visible="formVisible" :forms="forms" :title="formTitle" @pick="formPickFn" />
  </NuxtLayout>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { getCourseApi, addCourseVideo, updateCourseVideo, deleteCourseVideo } from '~/server/api'
import MyForm from './form'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_课程管理_视频管理",
  keywords: "技考邦,课程管理,视频管理",
  description: "技考邦，课程管理，视频管理。",
  ogTitle: "技考邦_课程管理_视频管理",
  ogDescription: "技考邦，课程管理，视频管理。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
const expandedRowKeys = ref([]);
const parentValId = ref()
// 去添加章节
const goAddFn = () => {
  useRouter().push(`/admin/chapter/${useRoute().params.id}`)
}
// 详情
const goAddStatus = ref(false)
const tableData = ref([])
const infoData = ref({})
const getList = async () => {
  let { data: infoRes } = await useAsyncData('getCourseApi', () => useServerRequest(getCourseApi, {
    method: 'get',
    params: {
      courseId: useRoute().params.id
    }
  }))
  if (infoRes.value && infoRes.value.errno === 0 && infoRes.value.result) {
    goAddStatus.value = infoRes.value.result.chapters && infoRes.value.result.chapters.length > 0 ? false : true;
    tableData.value = infoRes.value.result.chapters;
    infoData.value = infoRes.value.result;
    // 展开指定行
    if (parentValId.value) {
      expandedRowKeys.value = [parentValId.value]
    }
  }
}
getList()
// 添加
const forms = ref({
  id: null,
  chapterId: '',
  title: '',
  brief: '',
  sort: 0,
  video: '',
  imgs: [],
  enabled: true,
  duration: 0,
  hours: 0,
  // verifyQuestions: [{
  //   second: 10,
  //   question: '您是否正在观看当前课程视频呢？',
  //   options: [{
  //     letter: 'A',
  //     title: '是'
  //   }, {
  //     letter: 'B',
  //     title: '否'
  //   }]
  // }]
})
const formVisible = ref(false)
const formTitle = ref('')
const addFn = (val) => {
  forms.value.id = null;
  forms.value.chapterId = val.id;
  forms.value.chapterName = val.name;
  forms.value.title = '';
  forms.value.brief = '';
  forms.value.sort = 0;
  forms.value.video = '';
  forms.value.imgs = [];
  forms.value.enabled = true;
  forms.value.duration = 0;
  forms.value.hours = 0;
  // forms.value.verifyQuestions = [{
  //   second: 10,
  //   question: '您是否正在观看当前课程视频呢？',
  //   options: [{
  //     letter: 'A',
  //     title: '是'
  //   }, {
  //     letter: 'B',
  //     title: '否'
  //   }]
  // }];
  parentValId.value = val.id;
  formTitle.value = '添加视频';
  formVisible.value = true;
}
// 编辑
const editFn = (val, parentVal) => {
  forms.value.id = val.id;
  forms.value.title = val.title;
  forms.value.chapterName = parentVal.name;
  forms.value.brief = val.brief;
  forms.value.sort = val.sort;
  forms.value.video = val.video;
  forms.value.imgs = val.imgs;
  forms.value.enabled = val.enabled;
  forms.value.duration = val.duration;
  forms.value.hours = val.hours;
  forms.value.verifyQuestions = val.verifyQuestions;
  parentValId.value = parentVal.id;
  formTitle.value = '编辑视频';
  formVisible.value = true;
}
// 删除
const delFn = (val) => {
  ElMessageBox.confirm('是否删除当前数据', {
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false
  }).then(async () => {
    let delRes = await useServerRequest(deleteCourseVideo, {
      method: 'post',
      body: JSON.stringify({
        id: val.id
      })
    })
    if (delRes.errno === 0) {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      getList()
      return false;
    }
  }).catch(() => {})
}
// 取消 确认
const formPickFn = async (e) => {
  if (e.form) {
    const loading = ElLoading.service({ text: '请求中...', target: document.querySelector('.el-dialog') })
    let url = e.form.id ? updateCourseVideo : addCourseVideo;
    let teacherRes = await useServerRequest(url, {
      method: 'post',
      body: JSON.stringify(e.form)
    })
    if (teacherRes.errno === 0) {
      ElMessage({
        message: e.form.id ? '修改成功' : '添加成功',
        type: 'success'
      })
      getList()
      formVisible.value = e.visible;
    }
    loading.close()
    return false;
  }
  formVisible.value = e.visible;
}
</script>

<style lang="less" scoped>
a {
  color: #333;
}

.card {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #EEEEEE;
  padding: 35px 25px;
}
</style>